<!--
 * @Author: wangding
 * @Date: 2020-11-11 15:41:15
 * @LastEditTime: 2020-12-30 20:17:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sale\buyPage.vue
-->
<template>
    <div class='buyPage-main-box'>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.wifiSn')}}</span>
                <el-input v-big v-model="wifiSN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setNewVisible',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                :title="$t('promotionManagement.allDelete')"
                @confirm='saleDeleteBatch()'
                :confirm-button-text='$t("sure")'
                :cancel-button-text='$t("cancel")'
                style="margin-right:20px;"
            >
                <el-button type="danger" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
            </el-popconfirm>
            <el-upload
            class="upload-demo"
            :action="action"
            :on-change="handleChange"
            :show-file-list='false'
            :on-success='fileSuccess'
            :on-error='fileError'
            style="margin-right:20px;"
            >   
                    <el-button size="small" icon='el-icon-upload2'  type="primary" :title="$t('device-buy-page-import-notice')">{{$t('import')}}</el-button>
            </el-upload>
            <el-button type="primary" icon='el-icon-download' class="marginR10" @click="downmloadModal">{{$t('download.templates')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add v-if='newVisible'></add>
    </div>
</template>

<script>
import add from './add'
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        add,
        baseTable
    },
    props: {

    },
    data() {
        return {
            wifiSN:'',
            dataRows:[],
            size:10,
            current:1,
            total:1,
            loading:false,
            selectDataList:[],
            column:[{
                title: this.$t('servicechange.wifiSN'),
                value: 'wifiSN',
            },
            {
                title: this.$t('sale.buyPage.salerName'),
                value: 'salerName',
                slot: 'salerName'
            },
            {
                title: this.$t('salePage.tradeTime'),
                value: 'tradeTime',
                slot: 'tradeTime',
            }],
            action:process.env.VUE_APP_DOWNLOAD_PROXY +'/sale/writeExcelToDb?token='+sessionStorage.getItem('token')

        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.saleGetPage()
    },
    methods: {
        handleChange(){

        },
        fileSuccess(response, file, fileList){
            console.log(response, file, fileList,'success');
            if(this.comm.showMsg(response.success)){
                this.saleGetPage()
            }
        },
        fileError(err, file, fileList){
            this.$message({
                message:this.$t('index.control_fail'),
                type: 'warning'
            });
        },
        async saleDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res=  await this.API.saleDeleteBatch({
                ids:this.selectDataList.map(item =>{ return item.sid})
            })
            if(this.comm.showMsg(res.success)){
                this.saleGetPage()
            }
        },  
        async saleGetPage(){
            this.loading = true
            let res = await this.API.saleGetPage({
                wifiSN:this.wifiSN,
                size:this.size,
                current:this.current
            })
            this.total = res.total
            this.dataRows = res.rows
            this.loading = false
        },
        query(){
            this.current = 1
            this.saleGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.saleGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.saleGetPage()
        },
        downmloadModal(){
            // console.log(process.env.VUE_APP_BASE_PROXY + process.env.VUE_APP_BASE_API2+ '/sale/downLoadSaleExcel.do');
            // return
            // window.open(process.env.VUE_APP_BASE_PROXY + process.env.VUE_APP_BASE_API2+ '/sale/downLoadSaleExcel.do')
            this.comm.windowOpen('/sale/downLoadSaleExcel')
            // window.open(process.env.VUE_APP_DOWNLOAD_PROXY +'/sale/downLoadSaleExcel')
        }
    },
};
</script>

<style  lang="less" scoped>

</style>
